<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp_lib/init.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>交易流水</title>
<jsp:include page="/WEB-INF/jsp/common/common.jsp" />
<jsp:include page="/WEB-INF/jsp_lib/extjs.jsp" />

<style>
.red{
	color:red;
}
.blue{
	color:blue;
}
</style>
<jsp:include page="add.jsp" />
<jsp:include page="edit.jsp" />

<script type="text/javascript">
	var dataStore;

	Ext.onReady(function() {

		dataStore = Ext.create('Ext.data.Store', {
			fields : [ 'kid', 'status', 'created', 'customer_id',
					'customer_card_id', 'type', 'money', 'address', 'rate',
					'money_remain', 'note' ],
			remoteSort : true,
			autoLoad : true,
			pageSize : 30,
			sorters : {
				property : 'created',
				direction : 'DESC'
			},
			proxy : {
				type : "ajax",
				url : "list_data.htm",
				reader : {
					type : 'json',
					rootProperty : 'list',
					totalProperty : 'page.rowTotal'
				}
			},
			listeners : {
				'beforeload' : function(store, op, options) {
					var params = searchFormPanel.getForm().getValues();
					Ext.apply(dataStore.proxy.extraParams, params);
				}
			}
		}); //#dataStore

		var searchFormPanel = Ext.create('Ext.form.Panel', {
			frame : true,
			title : "卡主信息",
			style : {
				marginBottom : '5px'
			},
			buttonAlign : "center",
			collapsible : true,
			defaultType : "textfield",
			items : [ {
				xtype : "container",
				layout : "column",
				items : [ {
					xtype : "textfield",
					fieldLabel : "姓名",
					value : "${customer.name}",
					readOnly : true
				}, {
					xtype : "textfield",
					fieldLabel : "手机号码",
					value : "${customer.mobile}",
					readOnly : true
				}, {
					xtype : "textfield",
					fieldLabel : "住宅电话",
					value : "${customer.telephone}",
					readOnly : true
				}, {
					xtype : "textfield",
					name : "customer_id",
					value : "${customer.kid}",
					hidden : true
				}, , {
					xtype : "textfield",
					name : "customer_card_id",
					value : "${card.kid}",
					hidden : true
				} ]
			} ]
		}); //#searchFormPanel

		var cardFormPanel = Ext.create('Ext.form.Panel', {
			frame : true,
			title : "信用卡信息",
			style : {
				marginBottom : '5px'
			},
			buttonAlign : "center",
			collapsible : true,
			defaultType : "textfield",
			items : [ {
				xtype : "container",
				layout : "column",
				items : [ {
					xtype : "textfield",
					fieldLabel : "银行",
					readOnly : true,
					value : "${bank.name}"
				}, {
					xtype : "textfield",
					fieldLabel : "卡号",
					readOnly : true,
					value : "${card.card_no}"
				}, {
					xtype : "numberfield",
					fieldLabel : "固定额度",
					readOnly : true,
					value : "${card.money_max}"
				}, {
					xtype : "numberfield",
					fieldLabel : "临时额度",
					readOnly : true,
					value : "${card.money_max_temp}"
				}, {
					xtype : "numberfield",
					fieldLabel : "超限额度",
					readOnly : true,
					value : "${card.money_max_super}"
				}, {
					xtype : "numberfield",
					fieldLabel : "卡内余额",
					readOnly : true,
					value : "${card.money_remain}"
				} ]
			} ]
		}); //#cardFormPanel

		var listGridPanel = Ext.create('Ext.grid.Panel', {
			title : '交易记录',
			tbar : [ {
				text : '新增交易',
				xtype : 'button',
				icon : jcapp.getIcon("add.png"),
				handler : function() {
					myAdd();
				}
			} ],
			dockedItems : [ {
				xtype : 'pagingtoolbar',
				store : dataStore, // same store GridPanel is using
				dock : 'bottom',
				displayInfo : true
			} ],
			store : dataStore,
			columns : [ {
				text : '时间',
				dataIndex : 'created',
				renderer : function(val) {
					return Ext.util.Format.date(new Date(val), "Y-m-d H:i:s");
				},
				flex : 1
			}, {
				text : '交易地点',
				dataIndex : 'address',
				flex : 1
			}, {
				text : '类型',
				dataIndex : 'type',
				flex : 1,
				renderer:function(val){
					var clazz = "red";
					if(val=="还款"){
						clazz = "blue";
					}
					return "<span class='"+clazz+"'>"+val+"</span>";
				}
			}, {
				text : '金额',
				dataIndex : 'money',
				flex : 1
			}, {
				text : '卡内余额',
				dataIndex : 'money_remain',
				flex : 1
			}, {
				text : '机器费率',
				dataIndex : 'rate',
				hidden:true,
				flex : 1
			},{
				text : '<span class="red">费率成本</span>/<span class="blue">转账手续费</span>',
				dataIndex : 'rate_money',
				flex : 1,
				renderer:function(val, cellmeta, record, rowIndex, columnIndex, store){
					var type = record.data["type"];
					var clazz = "red";
					if(type=="还款"){
						clazz = "blue";
					}
					
					return "<span class='"+clazz+"'>"+val+"</span>" ;
				}
			}, {
				text : '备注',
				dataIndex : 'note',
				flex : 1
			},{
				xtype : "actioncolumn",
				align : "center",
				text : '编辑',
				items : [ {
					xtype : 'button',
					tooltip : '编辑',
					icon : jcapp.getIcon("application_form_edit.png"),
					handler : function(grid, rowIndex, colIndex) {
						var rec = grid.getStore().getAt(rowIndex);
						//alert("编辑 " + rec.get('kid'));
						myEdit(rec.get('kid'));
					}
				} ]

			},{
				xtype : "actioncolumn",
				align : "center",
				text : '删除',
				items : [ {
					xtype : 'button',
					tooltip : '删除',
					icon : jcapp.getIcon("cross.png"),
					handler : function(grid, rowIndex, colIndex) {
						var rec = grid.getStore().getAt(rowIndex);
						myDel(rec.get('kid'));
					}
				} ]

			} ]
		}); //#listGridPanel

		searchFormPanel.render(Ext.getBody());
		cardFormPanel.render(Ext.getBody());
		listGridPanel.render(Ext.getBody());

	});

	function myDel(kid) {
		Ext.Msg.confirm("提示:", "确定删除选定的记录?", function(e) {
			if (e == "yes") {
				Ext.Ajax.request({
					url : "del.htm?kid=" + kid,
					success : function(response) {
						var json = Ext.util.JSON.decode(response.responseText);
						Ext.Msg.alert("提示", json.tip.msg);
						dataStore.load();
						window.location.reload(true);
					},
					failure : function(response) {
						Ext.Msg.alert("提示", "操作失败!");
					}
				});
			}//#if
		});
	}//#myDel
</script>
</head>
<body>

</body>
</html>
